import styled from "styled-components";


export const SearchFZBox = styled.div<{
    searchWidth?: number;
}>`
    width: ${(props) => (props.searchWidth ? props.searchWidth : 24)}rem;
    height: 3.4rem;
    position: relative;
    overflow: hidden;
    padding: 0;
    margin: 0;
    display: flex;
    align-items: center;
    input{
        width: 24rem;
        height: 3.2rem;
        color: #92A9C4;
        background: #053561;
        border: 0.1rem solid #1B6DA1;
        padding: 0 3.4rem 0 1rem;
        line-height: normal;
        box-sizing: border-box;
        font-size: 1.4rem;
        margin: 0;
    }
    input::placeholder{
        font-size: 1.4rem;
        color: #385E7D; 
        
    }
    input::placeholder-shown{
        text-overflow: ellipsis;
        
    }
    input:focus{
        outline: none; /* 去除默认的焦点样式 */
    }
    input:focus, input:active {
        border-color: #1677ff; /* 例如，将边框颜色改为红色 */
    }
    .input_right{
        position: absolute;
        right: 0;
        top: 0;
        width: 3.4rem;
        height: 3.4rem;
        display: flex;
        align-items: center;
        justify-content: center;
        color: #2398E2;
        .iconfont {
            font-size: 1.4rem;
        }
    }
`